<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Food Website</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.css">
	<link rel="stylesheet" type="text/css" href="food.css">
</head>
<body>
	<div class="top">
		<div class="list content">
			<img src="images/logo3.png">
			<ul class="title">
				<li class="web"><a href="http://127.0.0.1:8080">网站首页</a></li>
				<li><a href="caipu2.html">美食菜谱</a></li>
				<li class="person" id="person">
					<a href="">个人中心</a>
				</li>
				<li class="about">
					<a href="">关于我们</a>
					<ul class="about-1">
						<li><a href="">联系我们</a></li>
						<li><a href="">用户反馈</a></li>
					</ul>
				</li>
				<li class="zhuce">
					<span  id="zhuce">注册</span>
					<div class="tanchu">
						<form>
						  <div class="form-group">
						    <label for="exampleInputEmail1">用户名</label>
						    <input type="text" class="form-control username" id="exampleInputEmail1">
						  </div>
						  <div class="form-group">
						    <label for="exampleInputPassword1">密码</label>
						    <input type="password" class="form-control password" id="exampleInputPassword1">
						  </div>
						  <div class="form-group">
						    <label for="exampleInputPassword1">确认密码</label>
						    <input type="password" class="form-control surepassword" id="exampleInputPassword1">
						  </div>
						</form>
						<div class="div1">
							<button type="button" class="btn btn-success tijiao">提交</button>
							<button type="button" class="btn btn-warning cannel">取消</button>
						</div>
					</div>
				</li>
				<li class="denglu">
					<span  id="denglu">登录</span>
					<div class="tanchu2">
						<form>
						  <div class="form-group">
						    <label for="exampleInputEmail1">用户名</label>
						    <input type="text" class="form-control usernamelogin" id="exampleInputEmail1">
						  </div>
						  <div class="form-group">
						    <label for="exampleInputPassword1">密码</label>
						    <input type="password" class="form-control passwordlogin" id="exampleInputPassword1">
						  </div>
						</form>
						<div class="div2">
							<button type="button" class="btn btn-success sure">登录</button>
							<button type="button" class="btn btn-warning cannel2">取消</button>
						</div>
					</div>
				</li>
				<li class="denglu2">
					<span  id="denglu2">管理员登录</span>
					<div class="tanchu3">
						<form>
						  <div class="form-group">
						    <label for="exampleInputEmail1">用户名</label>
						    <input type="text" class="form-control adminuser" id="exampleInputEmail1">
						  </div>
						  <div class="form-group">
						    <label for="exampleInputPassword1">密码</label>
						    <input type="password" class="form-control adminpassword" id="exampleInputPassword1">
						  </div>
						</form>
						<div class="div3">
							<button type="button" class="btn btn-success sure2">登录</button>
							<button type="button" class="btn btn-warning cannel3">取消</button>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div style="clear:both"></div>
	</div>
	<div class="menu content">
		<ul class="banner">
			<li>美食推荐</li>
		</ul>
		<div class="imglist">
			<ul id="ullist">
				<% for(var i = 0; i < data.length;i++){ %>
				<li>
					<a href="getcontent?iddata=<%= data[i].id %>">
					<img src="uploads/<%= data[i].img %>">
					<p><%= data[i].name %></p>
					</a>
				</li>
				<% } %>
			</ul>
		</div>
	</div>
	<div class="content" id="topic">
		<ul>
			<li>话题分享</li>
		</ul>
		<div id="tem2" class="topic2">
			<p class="title2"></p>
			<p></p>
		</div>
	</div>
	<div class="bottom content">
		<p>版权所有:©2020陕西服装工程学院</p>
	</div>
	<script type="">
		httpurl="http://127.0.0.1:8080"
		var zhuce= document.getElementById('zhuce')
		var denglu = document.getElementById('denglu')
		var denglu2 = document.getElementById('denglu2')
		var tanchu = document.querySelectorAll(".tanchu")[0]
		var tanchu2 = document.querySelectorAll(".tanchu2")[0]
		var tanchu3 = document.querySelectorAll(".tanchu3")[0]
		var tijiao = document.querySelectorAll(".tijiao")[0]
		var cannel = document.querySelectorAll(".cannel")[0]
		var sure = document.querySelectorAll(".sure")[0]
		var cannel2 = document.querySelectorAll(".cannel2")[0]
		var sure2 = document.querySelectorAll(".sure2")[0]
		var cannel3 = document.querySelectorAll(".cannel3")[0]
		var person = document.getElementById("person")
		alist = person.getElementsByTagName("a")[0]
		
		person.onclick = function(){
			alert("请登录后进入个人中心！")
		}


		//Ajax的post方式用户注册
		tijiao.onclick = function(){
			var username = document.querySelectorAll(".username")[0].value
			var password = document.querySelectorAll(".password")[0].value
			var surepassword = document.querySelectorAll(".surepassword")[0].value
			var http = new XMLHttpRequest()
			http.open("post",`${httpurl}/register`)
			http.setRequestHeader("Content-type","application/x-www-form-urlencoded")
			if(username&&password&&surepassword){
				if(password === surepassword){
					tanchu.style.display = "none"
					http.send(`username=${username}&password=${password}&surepassword=${surepassword}`)
				}
				else{
					alert("前后两次密码不同，请重新填写！")
				}
			}
			else{
				alert("用户名或密码不能为空！")
			}
			http.onreadystatechange = function(){
				if(http.readyState == 4){
					data = JSON.parse(http.responseText)
					if(data.length>=1){
						alert("抱歉！该用户已注册！")
					}
					if (data.length== 0) {
						alert("注册用户成功！")
					}
				}
			}
		}

		//Ajax的post方式用户登录
		sure.onclick = function(){
			usernamelogin = document.querySelectorAll(".usernamelogin")[0].value
			var passwordlogin = document.querySelectorAll(".passwordlogin")[0].value
			var http = new XMLHttpRequest()
			http.open("post",`${httpurl}/login`)
			http.setRequestHeader("Content-type","application/x-www-form-urlencoded")
			if(usernamelogin&&passwordlogin){
				http.send(`usernamelogin=${usernamelogin}&passwordlogin=${passwordlogin}`)
			}
			else{
				alert("请填写正确用户名或密码！")
			}
			
			http.onreadystatechange = function(){
				if(http.readyState ==4){
					data = JSON.parse(http.responseText)
					//console.log(data=0)
					if(data.length == 1){
						tanchu2.style.display = "none"
						alert("登录成功！")
						if(window.localStorage){
							localStorage.value=document.querySelectorAll(".usernamelogin")[0].value
							username = localStorage.value
							location.href = `${httpurl}/persondata?username=${username}`	
						}

					}
					if(data == 0){
						alert("请填写正确用户名或密码！")
					}
				}
			}
		}



		//Ajax的post管理员登录
		sure2.onclick = function(){
			var adminuser = document.querySelectorAll(".adminuser")[0].value
			var adminpassword = document.querySelectorAll(".adminpassword")[0].value
			var http = new XMLHttpRequest()
			http.open("post",`${httpurl}/admin`)
			http.setRequestHeader("Content-type","application/x-www-form-urlencoded")
			if(adminuser&&adminpassword){
				http.send(`adminuser=${adminuser}&adminpassword=${adminpassword}`)
			}
			else{
				alert("请填写正确用户名或密码！")
			}
			
			http.onreadystatechange = function(){
				if(http.readyState ==4){
					data = JSON.parse(http.responseText)
					//console.log(data=0)
					if(data.length == 1){
						tanchu3.style.display = "none"
						alert("登录成功！")
						history.go(0)
						window.open(`${httpurl}/admin`)
					}
					if(data == 0){
						alert("请填写正确用户名或密码！")
					}
				}
			}
		}

		


		
		zhuce.onclick= function(){
			tanchu.style.display = "block"
		}
		denglu.onclick = function(){
			tanchu2.style.display = "block"
		}
		denglu2.onclick = function(){
			tanchu3.style.display = "block"
		}
		cannel.onclick = function(){
			tanchu.style.display = "none"
		}
		cannel2.onclick = function(){
			tanchu2.style.display = "none"
		}
		cannel3.onclick = function(){
			tanchu3.style.display = "none"
		}


		//后端返回数据2
		function fn2(data2){
			tem2 = document.getElementById("tem2")
			topic = document.getElementById("topic")
			for(var i=0;i<data2.length;i++){
				var newdiv = tem2.cloneNode(true)
				newdiv.id = ""
				var plist = newdiv.getElementsByTagName("p")
				plist[0].innerHTML = "用户：" + data2[i].username
				plist[1].innerHTML = data2[i].title + ":" +"&nbsp"+data2[i].content
				topic.appendChild(newdiv)
			}
		}
		var head = document.getElementsByTagName("head")[0]
		var script2= document.createElement("script")
		script2.src = `${httpurl}/getdata2?callback=fn2`
		head.appendChild(script2)
		
	</script>
</body>
</html>